<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery+bootstrap踩坑笔记</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="icon" href="/img/favicon.ico">
</head>

<body>
    <header class="flex align-center">
        <div class="left-name">XXXX项目</div>
        <div class="top-menu">
            <ul class="nav nav-pills bootstrap-nau" role="menu">
                <li class="nav-item">
                    <p class="nav-link" name="firstMenu">首页</p>
                </li>
                <li class="nav-item">
                    <p class="nav-link" data-toggle="dropdown" id="dropdownMenuLink" name="secondMenu">下拉菜单</p>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <p class="dropdown-item menu-child" tabIndex="1" name="secondMenu">菜单一</p>
                        <p class="dropdown-item menu-child" tabIndex="2" name="secondMenu">菜单二</p>
                        <p class="dropdown-item menu-child" tabIndex="3" name="secondMenu">菜单三</p>
                        <p class="dropdown-item menu-child" tabIndex="4" name="secondMenu">菜单四</p>
                    </div>
                </li>
                <li class="nav-item">
                    <p class="nav-link" name="thirdMenu">工具提示框</p>
                </li>
            </ul>
        </div>
    </header>
    <main>
    </main>
</body>
<script src="./js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/popper.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>

</html>